<%
include("../header.html"){}
%>
<div class="well" style="background-color: white;">
    <form id="requestForm">

        <div class="form-group">
            <label for="url">URL <i class="fa fa-refresh fa-spin  fa-fw margin-bottom" id="loading" style="display: none;"></i></label>

            <div class="input-group">
                <input type="text" class="form-control" id="url" name="url" value="${url}" placeholder="http://...">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <i class="fa fa-arrow-right"></i>
                        </button>
                      </span>
            </div>
        </div>

        <div class="form-group">
            <label>Headers:</label>

            <div id="headers">

                <% for(header in headers){ %>
                <div class="row" style="margin-top: 12px;">
                    <div class="col-lg-6">
                        <input type="text" class="form-control header-key" name="headerKey" value="${header.headerKey}" placeholder="Key">
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control header-value" name="headerValue" value="${header.headerValue}" placeholder="Value">
                      <span class="input-group-btn">
                        <button class="btn btn-default" onclick="removeThisRow(this)" type="button">
                            <i class="fa fa-remove"></i></button>
                      </span>
                        </div>
                    </div>
                </div>
                <% } %>
            </div>
        </div>
        <div class="form-group">
            <a class="btn btn-info btn-block" id="add-header-btn"><i class="fa fa-plus"></i> Add Header</a>
        </div>

        <div class="form-group">
            <label>Params:</label>

            <div id="params">
                <% for(param in params){ %>
                <div class="row" style="margin-top: 12px;">
                    <div class="col-lg-6">
                        <input type="text" class="form-control param-key" name="paramKey" placeholder="Key" value="${param.paramKey}">
                    </div>
                    <div class="col-lg-6">

                        <div class="input-group">
                            <input type="text" class="form-control param-value" name="paramValue" value="${param.paramValue}" placeholder="Value">
                      <span class="input-group-btn">
                        <button class="btn btn-default" onclick="removeThisRow(this)" type="button">
                            <i class="fa fa-remove"></i></button>
                      </span>
                        </div>
                    </div>
                </div>
                <% } %>
            </div>

        </div>
        <div class="form-group">
            <a class="btn btn-info btn-block" id="add-params-btn"><i class="fa fa-plus"></i> Add Param</a>
        </div>
        <label>Body:</label>

        <div class="form-group">
            <textarea class="form-control" id="body" name="body" rows="3">${body}</textarea>
        </div>

    <label>Result:</label>

    <div class="form-group">
        <textarea class="form-control" rows="10" id="result"></textarea>
    </div>

    <div class="form-group">
        <label >Alias Name</label>
        <input type="text" class="form-control" id="alias" name="alias" value="${alias}" placeholder="Test Interface...">
    </div>

        <input type="hidden" id="id" value="${id}">
    </form>
</div>
<script>
    $(function () {
        var headers = $($('#headers-temp').html());
        var params = $($('#params-temp').html());
        $('#headers-temp').remove();
        $('#params-temp').remove();
        headers.css('margin-top', '12px');
        params.css('margin-top', '12px');
        $('#add-header-btn').click(function () {
            $('#headers').append(headers.clone());
            return false;
        });
        $('#add-params-btn').click(function () {
            $('#params').append(params.clone());
            return false;
        });
        $('#requestForm').submit(function () {
            $('#loading').show();
            var headers = [];
            var params = [];
            $('#headers .row').each(function (i,o) {
                o = $(o);
                var headerKey = o.find('.header-key').val();
                var headerValue = o.find('.header-value').val();
                headers[i] = {
                    headerKey:headerKey,
                    headerValue:headerValue
                };

            });
            $('#params .row').each(function (i,o) {
                o = $(o);
                var paramKey = o.find('.param-key').val();
                var paramValue = o.find('.param-value').val();
                params[i] = {
                    paramKey:paramKey,
                    paramValue:paramValue
                };
            });
            var url = $('#url').val();
            var i = url.indexOf('?');
            var queryString = '';
            var id = $('#id').val();
            if(i>0){
                queryString = url.substring(i+1,url.length);
                url = url.substring(0,i);
            }
            var request = {
                queryString:queryString,
                url:url,
                id:id,
                body:$('#body').val(),
                interfaceName:$('#alias').val()
            };
            if(params.length > 0){
                request['postParams'] = JSON.stringify(params);
            }
            if(headers.length > 0){
                request['headers'] = JSON.stringify(headers);
            }
            $.post('save.html',request, function (data) {
                $('#id').val(data);

                $.post('request.html',{id:data}, function (data) {
                    $('#result').val(data);
                    $('#loading').hide();

                });
            });
            return false;
        });
    });
    function removeThisRow(event){
        $(event).closest('.row').remove();
    }
</script>
<div id="params-temp" style="display: none;">
    <div class="row">
        <div class="col-lg-6">
            <input type="text" class="form-control param-key" name="paramKey" placeholder="Key" value="${param.paramKey}">
        </div>
        <div class="col-lg-6">

            <div class="input-group">
                <input type="text" class="form-control param-value" name="paramValue" placeholder="Value">
                      <span class="input-group-btn">
                        <button class="btn btn-default" onclick="removeThisRow(this)" type="button">
                            <i class="fa fa-remove"></i></button>
                      </span>
            </div>
        </div>
    </div>
</div>
<div id="headers-temp" style="display: none;">
    <div class="row">
        <div class="col-lg-6">
            <input type="text" class="form-control header-key" name="headerKey" placeholder="Key">
        </div>
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control header-value" name="headerValue" placeholder="Value">
                      <span class="input-group-btn">
                        <button class="btn btn-default" onclick="removeThisRow(this)" type="button">
                            <i class="fa fa-remove"></i></button>
                      </span>
            </div>
        </div>
    </div>
</div>
<%
include("../footer.html"){}
%>